<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/public.css"/>
	<link rel="stylesheet" type="text/css" href="./css/info.css"/>
	<link rel="stylesheet" type="text/css" href="./css/glayer.css"/>
</head>
<body>
	<%- include('./header.html')%>
	<div class="center-main">
		<!--左侧导航-->
		<%- include('./side.html')%>
		<!--右侧主题内容-->
		<div class="center-main-content">
			<div class="info">
				<div class="infotitle">
					<span class="active">个人资料</span>
					<span>用户头像</span>
				</div>
				<div class="infobox">
					<div class="infoboxitemwrap">
						<table class="addinfocon">
							
							<tr class="addinfoconcon">
								<td class="width1"><span>登录名称:</span></td>
								<td class="itemtd"><input type="text"></td>
								<td class="width1"><span>昵称:</span></td>
								<td class="itemtd" style="padding-right: 40px"><input type="text"></td>
							</tr>
							<tr class="addinfoconcon">
								<td class="width1"><span>出生日期:</span></td>
								<td class="itemtd">
									<input type="text">
								</td>
								<td class="width1"><span>性别:</span></td>
								<td class="itemtd sex" style="padding-right: 40px">
									<label for="id1"><input id="id1" type="radio" name="sex"><i></i><span>男</span></label>
									<label for="id2"><input type="radio" id="id2" name="sex"><i></i><span>女</span></label>
								</td>
							</tr>
							<tr class="addinfoconcon">
								<td class="width1"><span>所在地区:</span></td>
								<td class="itemtd"><select name="city" id="">
									<option value="">是是是</option>
									<option value="">是是是</option>
									<option value="">是是是</option>
								</select>
								<select name="city" id="">
									<option value="">是是是</option>
									<option value="">是是是</option>
									<option value="">是是是</option>
								</select>
								<select name="city" id="">
									<option value="">是是是</option>
									<option value="">是是是</option>
									<option value="">是是是</option>
								</select></td>
								<td class="width1"><span>真实姓名:</span></td>
								<td class="itemtd" style="padding-right: 40px"><input type="text"></td>
							</tr>
							<tr class="addinfoconcon">
								<td class="width1"><span>学历:</span></td>
								<td class="itemtd">
									<input type="text">
								</td>
								<td class="width1"><span>专业:</span></td>
								<td class="itemtd" style="padding-right: 40px"><input type="text"></td>
							</tr>
							<tr class="addinfoconcon" style="border-bottom:1px solid #DADEE8">
								<td class="width1"><span>常用邮箱:</span></td>
								<td class="itemtd">
									<input type="text">
								</td>
								<td class="width1"></td>
							</tr>
							<tr class="" style="height: 20px">
								<td colspan="4"></td>
							</tr>
						</table>
						<div class="infobtn">
							<a href="javascript:;" class="queding">保存资料</a>
							<a href="javascript:;" class="quxiao">取消</a>
							<a href="javascript:;" class="quxiao">编辑</a>
						</div>
					</div>
					<div class="infoboxitemwrap">
						<div class="imglist">
							<p class="imgtitle"><span>推荐头像</span><i>赶快设置属于自己的头像吧~~</i></p>
							<ul>
								<li class="active">
									<img src="./img/touxiang2.png" alt="">
								</li>
								<li>
									<img src="./img/touxiang2.png" alt="">
								</li>
								<li>
									<img src="./img/touxiang2.png" alt="">
								</li>
								<li>
									<img src="./img/touxiang2.png" alt="">
								</li>
								<li>
									<img src="./img/touxiang2.png" alt="">
								</li>
								<li>
									<img src="./img/touxiang2.png" alt="">
								</li>
								<li>
									<img src="./img/touxiang2.png" alt="">
								</li>
								<li>
									<img src="./img/touxiang2.png" alt="">
								</li>
								<li>
									<img src="./img/touxiang2.png" alt="">
								</li>
								<li>
									<img src="./img/touxiang2.png" alt="">
								</li>
							</ul>
						</div>
						<div class="imgshow">
							<p class="imgtitle"><span>效果预览</span></p>
							<div class="imgshowbox">
								<div class="imgshowboxlf">
									<img src="./img/touxiang2.png" alt="">
									<span>180*180像素</span>
								</div>
								<div class="imgshowboxrg">
									<img src="./img/touxiang2.png" alt="">
									<span>50*50像素</span>
								</div>
							</div>
						</div>
					</div>
					<div class="infobtn">
						<a href="javascript:;" class="queding">保存头像</a>
						<a href="javascript:;" class="quxiao">取消</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<%- include('./footer.html')%>
	<script src="./js/jquery-1.11.3.min.js"></script>
	<script src="./js/glayer.js"></script>
	<script>
		$('.imglist li').click(function(){
			$(this).addClass('active')
			$(this).siblings().removeClass()
		})
		var layer = new Layer()
		$('.liveingboxbtn').click(function(){
			layer.confirm('在此填入内容哈哈哈哈！',function(dom){
				console.log('关闭了啊啊啊！')
				dom.remove()
			})
		})
		
	</script>
</body>
</html>